

class SessionList  extends React.Component{
    columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: 'data',
            key: 'data',
            width: 500,
            render: (text, row, index) => {
                return  <pre>{JSON.stringify(row,null,2)}</pre> ;
            },
        }
    ];

    constructor(props) {
        super(props);
        this.keyWordsRefContent="";
    }
    state={
        data:[],
        loading: false,
        pagination: {   //搜索参数
            current: 1,
            pageSize: 5,
            keywords: '',
            order: '',
            filter: {},
            total: 0,
            showSizeChanger: true,
            pageSizeOptions: ['1','5','10','30'],
            onShowSizeChange: (current, pageSize) => {
                const { pagination } = this.state;
                pagination.pageSize = pageSize;
                this.setState({
                    pagination
                });
            },
            showTotal: ((total) => {
                return `共 ${total} 条`;
             }),
            },
            selectedRowKeys: [],
            selectedRows: [],
    }

    async componentDidMount() {
        this.fetch();
    }

    async fetch(){
        let { current,pageSize,keywords,order,filter } = this.state.pagination;
        this.setState({ loading: true });
        let r= await MIO.sessionList({
                page: current,
                num: pageSize,
                keywords: keywords,
                ...filter
               }
            )
        let data = r.data.rows;
        let total = r.data.total;
        const pagination = { ...this.state.pagination };
        pagination.total = total;
        this.setState({
            pagination,
            data,
            loading: false
        });
    }


    handleTableChange(pagination){
        this.state.pagination.current=pagination.current;
        this.setState({
            pagination: this.state.pagination
        },() => {
            this.fetch();
        });
    }

    rowSelection = () => {
        const { selectedRowKeys } = this.state;
        return {
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys,
                });
            },
            getCheckboxProps: record => ({
                name: record.id+"",
            }),
            onSelect: (record, selected, selectedRows, nativeEvent) => {
                let { selectedRows: globalSelectedRows } = this.state;
                if (selected) {
                    if (globalSelectedRows.length === 0) {
                        globalSelectedRows.push(record);
                    } else {
                        for (let i = 0; i < globalSelectedRows.length; i++) {
                            const items = globalSelectedRows[i];
                            if (items.id != record.id && i === globalSelectedRows.length - 1) {
                                globalSelectedRows.push(record);
                            }
                        }
                    }
                } else {
                    globalSelectedRows = globalSelectedRows.filter(items => items.id != record.id);
                }
                this.setState({
                    selectedRows: globalSelectedRows,
                });
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                let { selectedRows: globalSelectedRows, selectedRowKeys } = this.state;
                const keyArr = changeRows.map(items => items.id);
                if (selected) {
                    selectedRowKeys = [...selectedRowKeys, ...keyArr];
                    globalSelectedRows = [...globalSelectedRows, ...changeRows];
                } else {
                    selectedRowKeys = selectedRowKeys.filter(key => keyArr.indexOf(key) === -1 );
                    globalSelectedRows = globalSelectedRows.filter(items => keyArr.indexOf(items.id) === -1 );
                }
                this.setState({
                    selectedRowKeys,
                    selectedRows: globalSelectedRows,
                });
            }
        }
    }



    handleSearch(v){
        let pagination = this.state.pagination;
        pagination.keywords = this.keywordsRef.state.value;
        pagination.current = 1;
        this.setState({
            pagination,
            selectedRowKeys: [],
            selectedRows: [],
        },() => {
            this.fetch()
        });
    }



    render(){
        return(
            <div>
                <Input style={{width:300}} ref={el=>this.keywordsRef =el}></Input>
                <Button style={{marginLeft:"20px"}} onClick={this.handleSearch.bind(this)}>搜索</Button>
                <Table
                    rowKey={(record, index) => record.id}
                    dataSource={this.state.data}
                    columns={this.columns}
                    pagination={this.state.pagination}
                    loading={this.state.loading}
                    onChange={this.handleTableChange.bind(this)}
                    rowSelection={this.rowSelection()}

                />

            </div>

        )
    }
}
